<template>
	<view>
		<view class="header">
			<u-navbar title="云打印" bg-color="transparent" :placeholder="true" leftIconColor="transparent" />
			<view class="notice">
				<u-notice-bar :text="noticeList" direction="column" color="#FB8B07" bgColor="#ffe8d3" :fontSize="26" />
			</view>
			<u-swiper class="swiper" :list="bannerList" :height="340" keyName="ad_code" :circular="true"
				@change="e => swiperCurrent = e.current">
				<view slot="indicator" class="swiper-dot-list">
					<view class="swiper-dot" v-for="(item, index) in bannerList" :key="index"
						:class="[index === swiperCurrent && 'active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="entry-list">
			<view class="entry-list-left" @click="navTo('pages/indexs/doc/upload')">
				<image src="@/static/img/home-entry01.png" />
				<text class="title">
					资料文档打印
				</text>
				<text class="ctn">
					支持PDF、Word、PPT格式。
				</text>
			</view>
			<view class="entry-list-right">
				<image src="@/static/img/home-entry02.png" @click="navTo('pages/indexs/id_photo/size_select')"></image>
				<image src="@/static/img/home-entry03.png" @click="navTo('pages/indexs/photo/size_select')"></image>
			</view>
		</view>
		<text class="tips">已获得信息安全管理体系（ISO27001）认证</text>
		<ContactBtn :is-dock="true" />
	</view>
</template>

<script>
	import ContactBtn from '@/components/ContactBtn.vue'
	import entry01 from '@/static/img/home-entry01.png'
	import {
		mapGetters
	} from 'vuex'
	import {
		UserApi
	} from '@/api'
	export default {
		components: {
			ContactBtn
		},
		data() {
			return {
				noticeList: [],
				bannerList: [],
				entryList: [{
						imgUrl: entry01,
						path: ''
					},
					{
						imgUrl: '../../static/img/home-entry02.png',
						path: ''
					},
					{
						imgUrl: '../../static/img/home-entry03.png',
						path: ''
					},
				],
				swiperCurrent: 0,
			}
		},
		computed: {
			...mapGetters(['token'])
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				UserApi.GetAdList()
					.then(res => {
						this.bannerList = res.result
					})
					.catch(err => {
						console.log(err);
					})
				for (let i = 1; i <= 10; i++) {
					UserApi.messageList()
						.then(res => {})
						.catch(err => {
							this.noticeList.push(err)
						})
				}
			},
			navTo(url) {
				if (!this.token)
					return this.$showToast('请先登录')
				this.$navTo(url)
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.header {
		border: 1rpx solid #d8d8d8;
		background: radial-gradient(75.3% 116.1% at 19.6% 31.2%, #feeadb 0%, #fef2e7 20%, #fffcf7 52%, #ffffff 100%);
		box-shadow: 0 0 20rpx 0 #b4b4b429;
	}

	.notice {
		margin: 80rpx 30rpx;
	}

	::v-deep .u-notice-bar {
		border-radius: 10rpx;
	}

	.swiper-dot-list {
		display: flex;
		justify-content: center;

		.swiper-dot {
			margin-right: 5rpx;
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			background: #c0bfbb;
			transition: width 0.3s,
				background-color 0.3s;

			&:last-of-type {
				margin-right: 0;
			}
		}

		>.active {
			width: 30rpx;
			background: #fb8b07;
		}
	}

	.entry-list {
		display: flex;
		justify-content: space-between;
		margin: 42rpx 30rpx 0;
		height: 412rpx;


		image {
			width: 330rpx;
		}
	}

	.entry-list-left {
		position: relative;
		padding: 0 30rpx;
		width: 270rpx;
		height: 100%;

		>image {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		text {
			display: block;
		}

		.title {
			margin-top: 45rpx;
			color: #000000;
			font-size: 36rpx;
		}

		.ctn {
			margin-top: 18rpx;
			color: #a8a8a7;
			font-size: 22rpx;
		}
	}

	.entry-list-right {
		display: flex;
		flex-direction: column;
		margin-left: auto;

		>image {
			flex: 1;

			&:last-of-type {
				margin-top: 22rpx;
			}
		}
	}

	.tips {
		display: block;
		margin: 170rpx auto 40rpx;
		font-size: 24rpx;
		text-align: center;
		color: #BEBEBE;
	}
</style>